﻿<UserControl
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:designViewModels="using:AdventureWorks.Shopper.DesignViewModels"
             xmlns:Infrastructure="using:Microsoft.Practices.Prism.StoreApps"
             xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core" x:Name="userControl"
             x:Class="AdventureWorks.Shopper.Views.ShoppingCartTabUserControl"
             Infrastructure:ViewModelLocator.AutoWireViewModel="true"
             mc:Ignorable="d"
             Width="80"
             Height="80"
             d:DesignHeight="300"
             d:DesignWidth="400"
             d:DataContext="{d:DesignInstance designViewModels:ShoppingCartTabDesignViewModel, IsDesignTimeCreatable=True}">

    <UserControl.Resources>
        <Style x:Key="ButtonStyle1"
               TargetType="Button">
        	<Setter Property="Background"
        		Value="{StaticResource ButtonBackgroundThemeBrush}" />
        	<Setter Property="Foreground"
        		Value="{StaticResource ButtonForegroundThemeBrush}" />
        	<Setter Property="BorderBrush"
        		Value="{StaticResource ButtonBorderThemeBrush}" />
        	<Setter Property="BorderThickness"
        		Value="{StaticResource ButtonBorderThemeThickness}" />
        	<Setter Property="Padding"
        		Value="12,4,12,4" />
        	<Setter Property="HorizontalAlignment"
        		Value="Left" />
        	<Setter Property="VerticalAlignment"
        		Value="Center" />
        	<Setter Property="FontFamily"
        		Value="{StaticResource ContentControlThemeFontFamily}" />
        	<Setter Property="FontWeight"
        		Value="SemiBold" />
        	<Setter Property="FontSize"
        		Value="{StaticResource ControlContentThemeFontSize}" />
        	<Setter Property="Template">
        		<Setter.Value>
        			<ControlTemplate TargetType="Button">
        				<Grid>
        					<VisualStateManager.VisualStateGroups>
        						<VisualStateGroup x:Name="CommonStates">
        							<VisualState x:Name="Normal" />
        							<VisualState x:Name="PointerOver">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
        										Storyboard.TargetName="Border">
        										<DiscreteObjectKeyFrame KeyTime="0"
        											Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}" />
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
        										Storyboard.TargetName="ContentPresenter">
        										<DiscreteObjectKeyFrame KeyTime="0"
        											Value="{StaticResource ButtonPointerOverForegroundThemeBrush}" />
        									</ObjectAnimationUsingKeyFrames>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="Pressed">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
        										Storyboard.TargetName="Border">
        										<DiscreteObjectKeyFrame KeyTime="0"
        											Value="{StaticResource ButtonPressedBackgroundThemeBrush}" />
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
        										Storyboard.TargetName="ContentPresenter">
        										<DiscreteObjectKeyFrame KeyTime="0"
        											Value="{StaticResource ButtonPressedForegroundThemeBrush}" />
        									</ObjectAnimationUsingKeyFrames>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="Disabled">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
        										Storyboard.TargetName="Border">
        										<DiscreteObjectKeyFrame KeyTime="0"
        											Value="{StaticResource ButtonDisabledBackgroundThemeBrush}" />
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
        										Storyboard.TargetName="Border">
        										<DiscreteObjectKeyFrame KeyTime="0"
        											Value="{StaticResource ButtonDisabledBorderThemeBrush}" />
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
        										Storyboard.TargetName="ContentPresenter">
        										<DiscreteObjectKeyFrame KeyTime="0"
        											Value="{StaticResource ButtonDisabledForegroundThemeBrush}" />
        									</ObjectAnimationUsingKeyFrames>
        								</Storyboard>
        							</VisualState>
        						</VisualStateGroup>
        						<VisualStateGroup x:Name="FocusStates">
        							<VisualState x:Name="Focused">
        								<Storyboard>
        									<DoubleAnimation Duration="0"
        										To="1"
        										Storyboard.TargetProperty="Opacity"
        										Storyboard.TargetName="FocusVisualWhite" />
        									<DoubleAnimation Duration="0"
        										To="1"
        										Storyboard.TargetProperty="Opacity"
        										Storyboard.TargetName="FocusVisualBlack" />
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="Unfocused" />
        							<VisualState x:Name="PointerFocused" />
        						</VisualStateGroup>
        					</VisualStateManager.VisualStateGroups>
        					<Border x:Name="Border"
        						BorderBrush="{TemplateBinding BorderBrush}"
        						BorderThickness="{TemplateBinding BorderThickness}"
        						Background="{TemplateBinding Background}"
        						Margin="3"
        						CornerRadius="50">
        						<ContentPresenter x:Name="ContentPresenter"
        							ContentTemplate="{TemplateBinding ContentTemplate}"
        							ContentTransitions="{TemplateBinding ContentTransitions}"
        							Content="{TemplateBinding Content}"
        							HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
        							Margin="{TemplateBinding Padding}"
        							VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
        					</Border>
        					<Rectangle x:Name="FocusVisualWhite"
        						IsHitTestVisible="False"
        						Opacity="0"
        						StrokeDashOffset="1.5"
        						StrokeEndLineCap="Square"
        						Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
        						StrokeDashArray="1,1" />
        					<Rectangle x:Name="FocusVisualBlack"
        						IsHitTestVisible="False"
        						Opacity="0"
        						StrokeDashOffset="0.5"
        						StrokeEndLineCap="Square"
        						Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
        						StrokeDashArray="1,1" />
        				</Grid>
        			</ControlTemplate>
        		</Setter.Value>
        	</Setter>
        </Style>
    </UserControl.Resources>

	<Grid>

		<VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
			<VisualStateGroup x:Name="ApplicationViewStates">
				<VisualState x:Name="DefaultLayout" />
				<VisualState x:Name="Filled" />
				<VisualState x:Name="PortraitLayout" />
				<VisualState x:Name="MinimalLayout">

					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Grid.ColumnDefinitions[0].Width"
							Storyboard.TargetName="Grid">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>Auto</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
							Storyboard.TargetName="ViewBox">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>Collapsed</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="ShoppingCartButton">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<x:Double>48</x:Double>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ShoppingCartButton">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<x:Double>48</x:Double>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<DoubleAnimation Duration="0" To="5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ItemCount" d:IsOptimized="True"/>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>
		<Button x:Name="ShoppingCartButton"
			x:Uid="ShoppingCartButton"
			AutomationProperties.AutomationId="ShoppingCartButton"
			Command="{Binding ShoppingCartTabCommand}"
			Width="80"
			Height="80"
			BorderBrush="White"
			Style="{StaticResource ButtonStyle1}">
			<Interactivity:Interaction.Behaviors>
				<Core:EventTriggerBehavior EventName="Click">
					<Core:NavigateToPageAction TargetPage="AdventureWorks.Shopper.Views.ShoppingCartPage"/>
				</Core:EventTriggerBehavior>
			</Interactivity:Interaction.Behaviors>
			<Grid x:Name="Grid">
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="17" />
					<ColumnDefinition />
				</Grid.ColumnDefinitions>
				<TextBlock x:Name="ItemCount"
					Text="{Binding ItemCount}"
					Width="Auto"
					MaxWidth="27"
					Grid.Column="0"
					Margin="-10,0,0,0"
					FontSize="16"
					FontWeight="ExtraBold"
					VerticalAlignment="Center"
					HorizontalAlignment="Right" RenderTransformOrigin="0.5,0.5" >
					<TextBlock.RenderTransform>
						<CompositeTransform/>
					</TextBlock.RenderTransform>
				</TextBlock>
				<Viewbox x:Name="ViewBox" 
					Width="40"
					Height="40"
					Grid.Column="1"
					HorizontalAlignment="Left"
					Margin="-5,0,0,10">
					<Canvas Width="60"
						Height="60"
						Canvas.Left="0"
						Canvas.Top="0">
						<Path x:Name="Path"
							Fill="{StaticResource AWShopperItemForegroundLighterBrush}"
							Data="F1 M 372.601,181.645L 364.733,181.645L 363.407,175.361C 363.161,174.768 362.819,174.233 362.681,173.593L 338.831,60.2533C 338.792,60.192 338.845,60.108 338.831,60.0707L 336.244,47.9467L 348.789,47.9467L 359.097,47.9467L 568.193,47.9467L 576.223,12.1387L 584.832,12.1387L 587.523,12.1387L 629.964,12.1387L 632.588,12.1387L 642.752,12.1387L 642.752,32.5213L 632.588,32.5213L 629.964,32.5213L 592.823,32.5213L 559.036,173.624L 550.945,215.913C 550.573,217.804 549.62,219.367 548.384,220.716C 553.027,225.077 555.971,231.195 555.971,238.057C 555.971,251.279 545.319,262 532.067,262C 518.821,262 508.1,251.279 508.1,238.057C 508.1,232.785 510.129,228.151 512.988,224.187L 413.115,224.187C 416.004,228.151 418.055,232.785 418.055,238.057C 418.055,251.279 407.319,262 394.044,262C 380.867,262 370.147,251.279 370.147,238.057C 370.147,232.785 372.205,228.151 375.087,224.187L 356.887,224.187C 356.855,224.187 356.756,224.132 356.688,224.132L 346.325,224.132L 346.325,203.804L 356.887,203.804L 362.681,203.804L 532.463,203.804L 536.725,181.676L 372.655,181.676L 372.601,181.645 Z "
							Stretch="Fill">
							<Path.RenderTransform>
								<TransformGroup>
									<ScaleTransform ScaleX=".13"
										ScaleY=".13" />
									<TranslateTransform X="13"
										Y="20" />
								</TransformGroup>
							</Path.RenderTransform>
						</Path>
					</Canvas>
				</Viewbox>
			</Grid>
		</Button>

	</Grid>
</UserControl>
